<template>
  <a-modal :title="title" width="940px" :maskClosable="false" :visible.sync="dialog" @ok="handleSave" @cancel="cancelForm">
    <a-form-model :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" :layout="'inline'" class="demo-ruleForm">
      <a-form-model-item :label="type=='1'?'首重(克)':'首件(件)'" prop="first">
        <a-input-number v-model="ruleForm.first" :min="0" :precision="2" :step="1"></a-input-number>
      </a-form-model-item>
      <a-form-model-item label="首费(元)" prop="firstPrice">
        <a-input-number v-model="ruleForm.firstPrice" :min="0" :precision="2" :step="1"></a-input-number>
      </a-form-model-item>
      <a-form-model-item :label="type=='1'?'续重(克)':'续件(件)'" prop="second">
        <a-input-number v-model="ruleForm.second" :min="0" :precision="2" :step="1"></a-input-number>
      </a-form-model-item>
      <a-form-model-item label="续费(元)" prop="secondPrice">
        <a-input-number v-model="ruleForm.secondPrice" :min="0" :precision="2" :step="1"></a-input-number>
      </a-form-model-item>
      <a-form-model-item label="省 份" prop="provinceList">
        <div style="padding-left:8px;">
          <a-button type="text" @click="selectAll">全选</a-button>
          <a-button type="text" @click="cancelAll">清空</a-button>
        </div>

        <div style="height:450px;overflow-y: scroll;">
          <!-- <a-tree style="width:760px;" v-if="dialog" :data="area_list" :default-checked-keys="default_checked_keys" accordion
            @check-change="setAreaList" show-checkbox node-key="id" ref="tree" :props="areaProps"> </a-tree> -->
          <a-tree ref="tree" checkable v-model="default_checked_keys" :tree-data="area_list" :replace-fields="{title: 'name',key:'id'}"
            @check="setCheckNodes" @change="ckChange" />
        </div>
      </a-form-model-item>
    </a-form-model>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import Areas from '@/utils/area'
export default {
  name: 'PostageDetailModal',
  data () {
    var validateList = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error('请选择省市'))
      } else {
        callback()
      }
    }
    return {
      checkObjsAll: [],
      type: '1',
      title: '',
      id: '',
      index: -1,
      area_list: Areas.areas,
      selectedList: [],
      checkNodes: [],
      default_checked_keys: [],
      areaProps: {
        children: 'children',
        label: 'name'
      },
      dialog: false,
      loading: false,
      ruleForm: {
        first: 0,
        firstPrice: 0,
        second: 0,
        secondPrice: 0,
        provinceList: []
      },
      rules: {
        first: [{ required: true, message: '请输入!' }],
        firstPrice: [{ required: true, message: '请输入!' }],
        second: [{ required: true, message: '请输入!' }],
        secondPrice: [{ required: true, message: '请输入!' }],
        provinceList: [{ required: true, validator: validateList }]
      }
    }
  },
  created () {

  },
  methods: {
    ckChange (e) {
      cosole.log(e)
    },
    //   查询数据

    selectAll () {
      let arr = []
      this.checkObjsAll = []
      for (let i = 0; i < this.area_list.length; i++) {

        for (let j = 0; j < this.area_list[i].children.length; j++) {
          arr.push(this.area_list[i].children[j].id)
          this.checkObjsAll.push({ id: this.area_list[i].children[j].id, name: this.area_list[i].children[j].name })
        }

      }
      this.default_checked_keys = arr
    },
    cancelAll () {
      this.default_checked_keys = []
      this.checkObjsAll = []
    },
    //   查询数据
    add () {
      this.dialog = true
      this.default_checked_keys = []
      this.checkObjsAll = []
      console.log(this.default_checked_keys)
      this.ruleForm = {
        first: 0,
        firstPrice: 0,
        second: 0,
        secondPrice: 0,
        provinceList: []
      }
    },
    update () {
      this.dialog = true
      this.default_checked_keys = []
      this.checkObjsAll = this.ruleForm.provinceList
      for (let i = 0; i < this.ruleForm.provinceList.length; i++) {
        this.default_checked_keys.push(this.ruleForm.provinceList[i].id)
      }
    },
    setCheckNodes (keys, e) {
      this.checkObjsAll = []
      this.checkNodes = e.checkedNodes
    },
    handleSave () {
      const self = this

      let checkObjs = []
      let states_all = false
      console.log("11111111111111111111")
      console.log(self.checkNodes)
      if (self.checkObjsAll.length > 0) {
        for (let i = 0; i < self.checkObjsAll.length; i++) {
          let states_has = true
          for (let j = 0; j < self.selectedList.length; j++) {
            if (j != self.index) {
              for (let k = 0; k < self.selectedList[j].provinceList.length; k++) {
                if (self.checkObjsAll[i].id == self.selectedList[j].provinceList[k].id) {
                  states_has = false
                  states_all = true
                }
              }
            }

          }
          if (states_has) {
            checkObjs.push({ id: self.checkObjsAll[i].id, name: self.checkObjsAll[i].name })
          }

        }
      } else {
        for (let i = 0; i < self.checkNodes.length; i++) {
          if (!self.checkNodes[i].data.props.dataRef.children) {
            let states_has = true
            for (let j = 0; j < self.selectedList.length; j++) {
              if (j != self.index) {
                for (let k = 0; k < self.selectedList[j].provinceList.length; k++) {
                  if (self.checkNodes[i].data.props.dataRef.id == self.selectedList[j].provinceList[k].id) {
                    states_has = false
                    states_all = true
                  }
                }
              }

            }
            if (states_has) {
              checkObjs.push({ id: self.checkNodes[i].data.props.dataRef.id, name: self.checkNodes[i].data.props.dataRef.name })
            }
          }
        }
      }

      self.ruleForm.provinceList = checkObjs
      if (self.ruleForm.provinceList.length == 0 && states_all == true) {
        this.$message.error('不能选择其他运费规则已经选择的城市！')
        return
      }
      self.$refs.ruleForm.validate(valid => {
        if (valid) {
          let thisForm = Object.assign({}, self.ruleForm)
          self.$emit('ok', thisForm, self.index)
          self.dialog = false
        } else {
          return
        }
      })
    },
    cancelForm () {
      this.dialog = false
    }
  }
}
</script>

<style scoped>
/** Button按钮间距 */
</style>
